<template>
  <div class="add">
    <BaseDialog
      :title="isType === 'add' ? '新增' : '编辑'"
      width="1000px"
      v-model:visible="innerVisible"
      :renderDefaultFooter="false"
    >
      <MyForm
        v-model:formData="formData"
        v-model:columns="formColumns"
        :rules="rules"
        :labelWidth="120"
        :saveBtnLoading="saveBtnLoading"
        background="#fff"
        @submit="onSubmit"
        @cancel="innerVisible = false"
      >
      </MyForm>
    </BaseDialog>
  </div>
</template>
<script setup>
import { ref, computed, onMounted, watch } from "vue";
import * as api from "@/api/index.js";
import { week, currentWeek } from "@/static/week.js";
import {
  columnFilters
} from "@/utils/mUtils.js";
import i18n from "@/lang/index.js";
import { ElMessage } from "element-plus";
const props = defineProps({
  visible: {
    type: Boolean,
  },
  currRow: {
    type: Object,
    default: () => null,
  },
  isType: {
    type: String,
    default: "add",
  },
});
const emits = defineEmits(["update:visible", "onSubmit"]);
const innerVisible = computed({
  get() {
    return props.visible;
  },
  set(val) {
    emits("update:visible", val);
  },
});
const formData = ref({
  whetherPalletPutaway: 0,
});
const formColumns = ref([
  {
    title: "",
    structure: [
      {
        formLayout: "el-row",
        content: [
          {
            label: "客户名称",
            prop: "customerCode",
            type: "remote_select",
            placeholder: "请选择委托单位",
            params: {
              searchKey: "keyword",
              keyValue: "customerCode",
              name: "customerNameZh",
              abbreviation: "customerCode",
              showCustomizedOption: true,
              displayKey: {
                coopTypeStr: "coopTypeStr",
                customerAbbr: "customerAbbr",
              },
              fixedParams: {
                coopType: "0",
              },
            },
            paramsKey: {
              customerNameZh: "customerNameZh",
              customerServiceCode: "",
              customerServiceName: "",
              salesName: "",
              salesCode: "",
            },
            apiModule: api.default.common.customers.selectAllCoopList,
            handleRemoteChange: (val, data, c) => {
              if (!val) return;
              customerGetInfo(data.customerCode);
            },
            xl: 8,
          },
          {
            label: "客服",
            prop: "customerServiceName",
            xl: 8,
          },
          {
            label: "业务员",
            prop: "salesName",
            joinStr: ",",
            xl: 8,
          },
          {
            label: "最终目的",
            prop: "destWarehouseCode",
            name: "destWarehouseName",
            detailedDisabled: true,
            type: "remote_select",
            params: {
              searchKey: "searchKey",
              keyValue: "warehouseCode",
              name: "warehouseName",
              abbreviation: "postcode",
              showCustomizedOption: true,
              displayKey: {
                countryName: "countryName",
                provinceName: "provinceName",
                cityName: "cityName",
                areaName: "areaName",
                address: "address",
              },
            },
            paramsKey: {
              destWarehouseName: "warehouseName",
              destWarehouseTypeCode: "typeCode",
              destWarehouseTypeName: "typeName",
            },
            apiModule: api.default.common.warehouse.queryList,
            xl: 8,
          },
          {
            label: "毛重",
            prop: "grossWeight",
            type: "label_number",
            xl: 8,
          },
          {
            label: "体积",
            prop: "volume",
            type: "label_number",
            xl: 8,
          },
          {
            label: "是否卡板入库",
            prop: "whetherPalletPutaway",
            type: "label_radio",
            props: {
              value: "value",
              label: "label",
            },
            options: [
              {
                label: "是",
                value: 1,
              },
              {
                label: "否",
                value: 0,
              },
            ],
            xl: 8,
          },
          {
            label: "卡板数量",
            prop: "palletQuantity",
            type: "label_number",
            hide: true,
            xl: 8,
          },
          {
            label: "预报所属周",
            prop: "week",
            type: "label_select",
            props: {
              value: "value",
              label: "label",
            },
            hide: true,
            options: week,
            xl: 8,
          },
        ],
      },
    ],
  },
]);
const rules = ref({});
const saveBtnLoading = ref(false);
onMounted(() => {
  formData.value.week = currentWeek();
  if (props.isType === "edit") {
    getInfo();
    return;
  }
});
watch(
  () => formData.value.whetherPalletPutaway,
  (val) => {
    if (val) {
      formData.value.week = currentWeek()
      columnFilters(formColumns.value, "palletQuantity").hide = false
      columnFilters(formColumns.value, "week").hide = false
    }else{
      formData.value.palletQuantity = null
      formData.value.week =  null
      columnFilters(formColumns.value, "palletQuantity").hide = true
      columnFilters(formColumns.value, "week").hide = true
    }
  }
);
const customerGetInfo = (val) => {
  api.default.common.customers
    .getInfoByCode({
      code: val,
    })
    .then((res) => {
      formData.value.customerServiceCode =
        res.data.oceanCustomerServiceList?.[0].employeeCode;
      formData.value.customerServiceName =
        res.data.oceanCustomerServiceList?.[0].employeeName;
      formData.value.salesCode = res.data?.oceanEmployeesList?.map(
        (item) => item.employeeCode
      ).join(",");
      formData.value.salesName = res.data?.oceanEmployeesList?.map(
        (item) => item.employeeName
      ).join(",");
    });
};
const getInfo = async () => {
  saveBtnLoading.value = true;
  try {
    const { data } = await api.default.order.cargoForecast.getInfo(
      props.currRow.id
    );
    formData.value = {
      ...data,
      provinceCityArea: [data.provinceCode, data.cityCode, data.areaCode],
    };
    saveBtnLoading.value = false;
  } catch (err) {
    saveBtnLoading.value = false;
  }
};

const onSubmit = () => {
  const parmas = {
    ...formData.value,
  };
  if (props.isType === "add") {
    // 新增
    saveBtnLoading.value = true;
    api.default.order.cargoForecast
      .add({
        ...parmas,
      })
      .then(() => {
        ElMessage.success("新增成功");
        innerVisible.value = false;
        saveBtnLoading.value = false;
        emits("onSubmit");
      })
      .catch(() => {
        saveBtnLoading.value = false;
      });
  } else {
    // 编辑
    saveBtnLoading.value = true;
    api.default.order.cargoForecast
      .edit(parmas)
      .then(() => {
        ElMessage.success("修改成功");
        innerVisible.value = false;
        saveBtnLoading.value = false;
        emits("onSubmit");
      })
      .catch(() => {
        saveBtnLoading.value = false;
      });
  }
};
</script>
<style lang="scss" scoped>
.search-btn {
  width: 120px;
  margin: 20px auto 0;
}
</style>
